<template>
  <div>
    <Swipe class="my-swipe" :autoplay="autoplay" :duration="duration" :initialSwipe="initialSwipe" :width="width" :height="height">
      <SwipeItem v-for="(item, index) in images" :key="index">
        <img :src="item.picUrl" alt="" />
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script>
 import { Swipe, SwipeItem } from "vant";

export default {
  components: {
    Swipe,
    SwipeItem,
  },
  props: {
    images: {
      type: Array,
      required: true,
      // validator: function (value) {
      //   return value.length !== 0;
      // },
    },
    autoplay: {
      type: Number || String,
      default: 3000,
    },
    duration: {
      type: Number || String,
      default: 1000,
    },
    initialSwipe: {
      type: Number || String,
      default: 0,
    },
    width: {
      type: String,
      default: "auto",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
};
</script>

<style>
.my-swipe img {
  width: 100%;
  height: 100%;
}
</style>